<template>
  <div style="position: relative">
    <div
      style="
        position: absolute;
        top: 4%;
        right: 20%;
        transform: translateX(-100%);
        font-size: 13px;
        color:#b8b4b4
        /* font-weight: bold; */
      "
    >
      计算机平均月薪地区集中分布地图（单位：元）
    </div>
    <div ref="chinaMap" style="display: flex; height: 50vh; width: 40vw"></div>
  </div>
</template>
<script lang="ts" setup>
import * as echarts from "echarts";
import chinaJSON from "../assets/中华人民共和国.json";
import { ref, nextTick, onBeforeMount } from "vue";
import { provinceSalary } from "../api/function";
const chinaMap = ref();

onBeforeMount(() => {
  nextTick(() => {
    ProvinceSalary();
  });
});

const ProvinceSalary = async () => {
  let res = await provinceSalary();
  console.log("地图数据", res.data);
  res.data.forEach((item: any) => {
    regions.push({
      value: item.salary,
      name: item.province,
      itemStyle: {
        areaColor:
          item.salary < 4000
            ? "#e3ef47"
            : item.salary < 8000
            ? "#39bf52"
            : item.salary < 10000
            ? "#47b6ef"
            : item.salary < 15000
            ? "#476fef"
            : "#ce1414",
        // areaColor: "#7730ce",
        opacity: 1,
      },
    });
  });
  // console.log("regions数组", regions);
  drawChina();
};

// 存储地区平均薪资数组
let regions: any[] = [];
function drawChina() {
  var myChart = echarts.init(chinaMap.value);
  echarts.registerMap("china", chinaJSON as any); //注册可用的地图
  var option = {
    geo: {
      map: "china",
      roam: false, //是否允许缩放，拖拽
      zoom: 1, //初始化大小
      //设置中心点
      center: [115.97, 29.71],
      //省份地图添加背景
      regions: regions,
      itemStyle: {
        areaColor: "#ededfd", // 初始区域颜色
        borderColor: "#111", // 边界颜色
      },
      emphasis: {
        // 保持与 itemStyle 一致，避免鼠标悬停时的颜色变化
        itemStyle: {
          areaColor: "#ededfd", // 与初始颜色保持一致
          borderColor: "#111", // 保持边框颜色一致
          borderWidth: 1, // 保持边框宽度
        },
      },
      tooltip: {
        show: true, // 确保 geo 上的 tooltip 被显示
        trigger: "item",
        formatter: function (params: any) {
          const region = regions.find((item) => item.name === params.name);
          const salary = region ? region.value : "无数据";
          return `${params.name}-${salary}`
        },
      },
    },
    //配置属性
    series: [
      {
        name: "0k-4k",
        type: "effectScatter",
        coordinateSystem: "geo",
        data: regions.filter((item) => item.salary < 4000),
        showEffectOn: "render",
        rippleEffect: {
          brushType: "stroke",
        },
        label: {
          formatter: "{b}",
          position: "right",
          show: true,
        },
        zlevel: 1,
      },
      {
        name: "4k-8k",
        type: "effectScatter",
        coordinateSystem: "geo",
        data: regions.filter(
          (item) => item.salary >= 4000 && item.salary < 8000
        ),
        showEffectOn: "render",
        rippleEffect: {
          brushType: "stroke",
        },
        itemStyle: {
          color: "#39bf52",
        },
      },
      {
        name: "8k-10k",
        type: "effectScatter",
        coordinateSystem: "geo",
        data: regions.filter(
          (item) => item.salary >= 8000 && item.salary < 10000
        ),
        showEffectOn: "render",
        rippleEffect: {
          brushType: "stroke",
        },
        itemStyle: {
          color: "#47b6ef",
        },
      },
      {
        name: "10k-15k",
        type: "effectScatter",
        coordinateSystem: "geo",
        data: regions.filter(
          (item) => item.salary >= 10000 && item.salary < 15000
        ),
        showEffectOn: "render",
        rippleEffect: {
          brushType: "stroke",
        },
        itemStyle: {
          color: "#476fef",
        },
      },
      {
        name: "15k以上",
        type: "effectScatter",
        coordinateSystem: "geo",
        data: regions.filter((item) => item.salary >= 15000),
        showEffectOn: "render",
        rippleEffect: {
          brushType: "stroke",
        },
        itemStyle: {
          color: "#ce1414",
        },
      },
    ],
    // 显示图例
    legend: {
      show: true,
      orient: "vertical",
      right: "70%",
      top: "55%",
      itemGap: 4,
      textStyle: {
        color: "#ededfd",
      },
      inverse: true, //图例逆序
      data: ["15k以上", "10k-15k", "8k-10k", "4k-8k", "0k-4k"],
    },
    // 显示地区与薪资的提示框
    tooltip: {
      trigger: "item",
    },
  };
  myChart.setOption(option);
  window.addEventListener("resize", () => {
    myChart?.resize();
  });
}
</script>
